<template>
  <!-- 表格头部 -->
  <div class="tdesign-demo-item--grid">
    <t-row :gutter="16">
      <t-col :span="3">
        <t-button @click="openDialog">新增护理项目</t-button>
      </t-col>

      <t-col :span="7" :offset="2" style="text-align: right">
        <!-- 搜索栏 -->
        <!--        <SearchForm @resetEmit="onReset" @submitEmit="onSubmit"></SearchForm>-->
      </t-col>
    </t-row>
  </div>

  <SearchForm @resetEmit="onReset" @onSubmitEmit="onSubmit"></SearchForm>

  <!-- 列表 -->
  <TableList
      :tableData="dataList"
      :pagination="pagination"
      @pageChangeEmit="pageChange"
      @handleEditEmit="handleEdit"
      @handleDeleteEdit="handleDelete"
      @handleDisableEmit="handleDisable"
  ></TableList>

  <!-- 新增/编辑弹框 -->
  <DialogForm
      :visible="visible"
      :data="formData"
      @dialogCloseEmit="closeDialog"
      @onFormSubmitEmit="onFormSubmit"
  ></DialogForm>

  <!--删除弹框-->
  <DeleteDialog
      :visible="deleteVisible"
      @handleClose="handleDeleteClose"
      @handleDelete="handleDeleteClick"
  ></DeleteDialog>

  <!-- 禁用弹框 -->
  <DisableDialog
      :visible="disableDialogVisible"
      :dataState="dataState"
      @handleClose="handleDisableDialogClose"
      @handleClick="handleDisableDialogClick"
  ></DisableDialog>
</template>

<script lang="tsx" setup>
import {onMounted, ref} from 'vue'
import {
  TableProps,
  MessagePlugin,
  FormInstanceFunctions,
  FormProps,
  CheckboxGroupProps,
  AutoCompleteProps,
  ButtonProps,
} from 'tdesign-vue-next'
//@ts-ignore
import DialogForm from './components/DialogForm.vue'
import {
  searchProject,
  addNursingProject,
  getNursingProjectDetail,
  editNursingProject,
  deleteNursingProject,
  updateNursingProjectStatus
} from './api/NursingProjectApi'
//@ts-ignore
import TableList from './components/TableList.vue'
//@ts-ignore
import SearchForm from './components/SearchForm.vue'
import DeleteDialog from '@/components/OperateDialog/index.vue'
import DisableDialog from '@/components/OperateDialog/disable.vue'
//布局方式
const layout = ref('inline')
//分页列表展示的
const dataList = ref([])
const total = ref(28)
const data = ref({})

const visible = ref(false)
//控制删除框
const deleteVisible = ref(false)

const deleteId = ref(null)

const disableDialogVisible = ref(false)
const dataState = ref(null)

// 确认操作
const handleDisableDialogClick = async () => {
  const result = await updateNursingProjectStatus(
      disableId.value,
      dataState.value
  )
  if (result.code === 200) {
    MessagePlugin.success('操作成功')
    handleDisableDialogClose()
    search()
  } else {
    MessagePlugin.error(result.msg)
  }
}

const disableId = ref(null)
// 展示启用/禁用弹框
const handleDisable = ({id, status}) => {
  disableDialogVisible.value = true
  dataState.value = status.toString()
  disableId.value = id
}

// 取消操作
const handleDisableDialogClose = () => {
  disableDialogVisible.value = false
  dataState.value = null
  disableId.value = null
}


const pagination = ref({
  current: 1,
  pageSize: 10,
  total
})


const searchFormData = ref({
  name: '',
  status: '',
});

// 弹框标题
const title = ref('新增护理项目')
// 初始数据
const formData = ref({})

// 显示弹框
const openDialog = () => {
  title.value = "新增护理项目"
  visible.value = true
}
// 关闭弹窗
const closeDialog = () => {
  visible.value = false
}
//打开删除的弹框
const handleDelete = (id) => {
  deleteVisible.value = true
  deleteId.value = id
}

//关闭删除弹框
const handleDeleteClose = () => {
  deleteVisible.value = false
  deleteId.value = null
}

const handleDeleteClick = async () => {
  const result = await deleteNursingProject(deleteId.value)
  if (result.code === 200) {
    MessagePlugin.success("删除成功")
    handleDeleteClose()
    search()
  } else {
    MessagePlugin.error("删除失败")
  }
}

// 页码发送改变触发
const pageChange = (pageInfo) => {
  pagination.value.current = pageInfo.current
  console.log(pageInfo)
  pagination.value.pageSize = pageInfo.pageSize
  search()
}
const search = async () => {
  // const { name, status } = searchFormData.value
  const params = {
    page: pagination.value.current,
    pageSize: pagination.value.pageSize,
    status: searchFormData.value.status == null ? '' : searchFormData.value.status,
    name: searchFormData.value.name
  }
  // 发送请求访问后端接口
  const result = await searchProject(params)
  if (result.code === 200) {
    // 解析数据渲染页面
    dataList.value = result.data.records
    // 分页数据总条数
    total.value = result.data.total
  }
}

onMounted(() => {
  search()
})
//搜索框重置按钮
const onReset = (formData) => {
  searchFormData.value = formData
  search()
};
//搜索的提交
const onSubmit = (formData) => {
  searchFormData.value = formData
  pagination.value.current = 1
  search()
}

// 新增和修改表单提交
const onFormSubmit = async (formData) => {
  let result = null
  if (formData.id) {
    console.log("formdata的数据")
    console.log(formData)
    result = await editNursingProject(formData)

  } else {
    result = await addNursingProject(formData)
  }

  if (result.code === 200) {
    MessagePlugin.success('操作成功')
    // 隐藏弹框
    closeDialog()
    // 加载最新数据
    search()
  } else {
    MessagePlugin.error(result.msg)
  }
}


// 编辑数据--------------------------
const handleEdit = async (id) => {
  const result = await getNursingProjectDetail(id)
  if (result.code === 200) {
    formData.value = result.data
    title.value = '编辑护理项目'
    visible.value = true
  } else {
    MessagePlugin.error(result.msg)
  }
}
</script>
